<template>
  <div>
    <!-- 准备容器 -->
    <div class="bar" ref="dom">
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {}
  },
  mounted() {
    //实例化
    let Mycharts = echarts.init(this.$refs.dom)
    Mycharts.setOption({

      xAxis: {
        show: true,
        //均匀分布
        type: 'category'
      },
      yAxis: {
        show: true
      },
      series: [
        {
          data: [10, 22, 28, 23, 19, 26, 35, 18, 24],
          type: 'bar',
          //曲线平滑
          smooth: true,

        }
      ],
      //布局
      grid: {
        left: -15,
        top: 0,
        bottom: 0,
        right: -10
      },
      //tooltip提示组件
      tooltip: {
        show: true,
        textStyle: {
          //提示框文字的颜色
          color: 'red'
        }
      },
    })

  }

}
</script>

<style scoped lang="scss">
.bar {
  width: 100%;
  height: 50px;
}
</style>